<template>
	<view class="content">
		<view class="row-item row_between">
			<view class="row-item-left">
				姓名
			</view>
			<view class="row-item-right">
				<input type="text" v-model="name" placeholder="输入姓名" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row-item row_between">
			<view class="row-item-left">
				卡号
			</view>
			<view class="row-item-right">
				<input type="number" v-model="accountno" placeholder="输入银行卡卡号" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row-item row_between">
			<view class="row-item-left">
				银行
			</view>
			<view class="row-item-right">
				<input type="text" v-model="bank" placeholder="输入银行卡名称" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row-item row_between">
			<view class="row-item-left">
				开户行
			</view>
			<view class="row-item-right">
				<input type="text" v-model="open" placeholder="输入银行开户行" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="botton-group">
			<button class="submit-button" :disabled="btnActive" :loading="isShowLoading" @click="confirm">确定</button>
		</view>
		<view class="buttom-text">
			注：银行信息需要填写完整才可完成打款
		</view>
	</view>
</template>

<script>
	import { addWithdrawAccount} from '@/utils/api';
	export default {
		data() {
			return {
				type:'bank',
				name: '',
				accountno: '',
				open: '',
				bank: ''

			};
		},
		methods:{
			async confirm(){
				if(!this.name || !this.accountno || !this.open || !this.bank){
					uni.showToast({
						icon: 'none',
						title: '信息不全',
						duration: 1000,
						position: 'bottom'
					});
					return;
				}
				let params={};
				params['type']=this.type;
				params['text']=this.accountno;
				params['name']=this.name;
				params['bank']=this.bank;
				params['open']=this.open;
				let res = await addWithdrawAccount(params);
				if (res.status==0) {
					uni.navigateBack({
						delta:1
					})
				} else{
					uni.showToast({
						icon:'none',
						title:res.message,
						duration:1000,
						position:'bottom'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		border-top: 2upx solid #E3E3E3;
	}

	.row-item {
		height: 113upx;
		border-bottom: 2upx solid #E3E3E3;
		padding: 0upx 33upx;

		.row-item-left {
			font-size: 30upx;
			font-weight:400;
			color:rgba(51,51,51,1);
		}

		.row-item-right {
			text-align: right;
		}
	}

	.botton-group {
		display: flex;
		flex-direction: column;
		padding:61upx 30upx 105upx 30upx;

		.submit-button {
			width: 98%;
			height: 88upx;
			background: rgba(173, 133, 252, 1);
			border-radius: 4upx;
			font-size: 34upx;
			font-weight:500;
			color:rgba(255,255,255,1);

			&:after {
				border: none
			}
		}
	}
	.buttom-text{
		color: #999999;
		font-size: 30upx;
		line-height: 1.0;
		text-align: center;
	}
	.placeholder{
		font-size:30upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
	}
</style>
